<template>
  <div id="ProjectInformation-list">
      <el-timeline style="opacity: 0.8;">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          type=primary
          size=large
          icon='el-icon-s-opportunity'
          >
           <!-- :timestamp="activity.timestamp"  -->
           <!-- opacity: 1.0; -->
          <el-card class="card1" style="background-color: rgb(245,245,245);">
            <el-row :gutter="12" style="margin-bottom:10px;">
              <el-col :span="2" class="pid">
                <h1>作品{{index+1}}</h1>
              </el-col>
              <el-col :span="22" class="pname">
                <h1>{{activity.pname}}</h1>
              </el-col>
            </el-row>
              <el-collapse v-model="activeNames" class="el-collapse">
                <el-collapse-item :name='index'>
                  <template slot="title">
                    <i class="el-icon-s-promotion"></i>{{activity.ptext}}
                  </template>
                  <div id="div-pox1">
                    <el-row :gutter="12" style="margin-bottom:2px;">
                      <el-col :span="12">
                          <div class="premarks">
                            作品简介：
                            {{activity.premarks}}
                          </div>
                      </el-col>
                      <el-col :span="4" v-if="(activity.purl)">
                        <el-card shadow="hover" style="background-color: rgb(245,245,245);">
                          <a :href="activity.purl" target="_blank">
                            <el-image
                              style="width: 75px; height: 75px;"
                              :src=imgUrl.imgUrlQD
                              fit=fill></el-image>
                            <!-- <h3>{{activity.purl}}</h3> -->
                          </a>
                          <h3>效果展示</h3>
                        </el-card>
                      </el-col>
                      <el-col :span="4" v-if="(activity.pgitee)">
                        <el-card shadow="hover" style="background-color: rgb(245,245,245);">
                          <a :href="activity.pgitee" target="_blank">
                            <el-image
                              style="width: 75px; height: 75px;"
                              :src=imgUrl.imgUrlGitee
                              fit=fill></el-image>
                          </a>
                          <h3>前端仓库</h3>
                        </el-card>
                      </el-col>
                      <el-col :span="4" v-if="(activity.pgitee2)">
                        <el-card shadow="hover" style="background-color: rgb(245,245,245);">
                          <a :href="activity.pgitee2" target="_blank">
                            <el-image
                              style="width: 75px; height: 75px;"
                              :src=imgUrl.imgUrlGitee
                              fit=fill></el-image>
                          </a>
                          <h3>后端仓库</h3>
                        </el-card>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
              </el-collapse>
            <el-tag class="tag1" type="" round v-for="(data, index) in (activity.plabel.trim().split(' '))" :key="index" >{{data}}</el-tag>
          </el-card>
        </el-timeline-item>
      </el-timeline>
  </div>
</template>

<script>
import ProjectInformation from '@/model/ProjectInformation'
import imgUrlGitee from '../../../public/static/img/gitee.png'
import imgUrlQD from '../../../public/static/img/QD.png'
import imgUrlHD from '../../../public/static/img/HD.png'

export default {
  name: 'ProjectInformationList',
  components: {
  },
  data() {
      return {
        TF_el_image:true,
        activities: [],
        imgUrl:{
          imgUrlGitee:imgUrlGitee,
          imgUrlQD:imgUrlQD,
          imgUrlHD:imgUrlHD,
        },
        activeNames: [0,1]
      };
    },
    async mounted() {
      const res = await ProjectInformation.getDetail()
      this.activities = res.data
    },
    methods : {
    }
  }
</script>

<style>
  #ProjectInformation-list{
    text-align:center;
    width: 60%;
    margin:0 auto;
    /* height: 750px; */
  }
  .tag1{
    margin-top: 8px;
    margin-bottom: -3%;
    margin-left: 4px;
    margin-right: 4px;
  }
  .card1{
    border-style:solid;
    border-color:#F0FFFF;
    border-width:15px;
    margin:3px 3px;
    margin-bottom: 35px;
  }
  .pname {
    color: #000000;

    display: inline-block;

    font-size: 1em;

    font-family: '微软雅黑';
  }
  .pid {
    color: #00FA9A;

    display: inline-block;

    font-size:8px;

    font-family: '微软雅黑';

    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(255,215,0)), to(rgb(97, 236, 115)));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
  }
  .premarks {
    float: left;
    size:55px;
    text-indent:25px;
    font-family: 'STKaiti';
    font-size:16px;
    color: #483D8B;
  }
  .el-alert_div_1 {
    margin-bottom:5px;
  }
  #div-pox1{
    padding: 0 5px;
  }
</style>

